<template>
	<div class="housedt_main">
		<div class="mesg_tit">房屋信息</div>
		<div class="main_pdlr10">
			<div class="list_mesgall clearfix" >
				<div class="line_list clearfix line100" >
					<span class="line_listtit fl">房屋地址：</span>
					<div class="line_listinput" >
						{{address}}
					</div>
				</div>

				<div class="line_list  clearfix">
					<span class="line_listtit fl">建筑面积：</span>
					<div class="line_listinput">
						{{structureArea}}平方米
					</div>
				</div>

				<div class="line_list  clearfix">
					<span class="line_listtit fl">采暖面积：</span>
					<div class="line_listinput">
						{{heatingArea}}平方米
					</div>
				</div>

				<div class="line_list  clearfix">
					<span class="line_listtit fl">建筑结构：</span>
					<div class="line_listinput">
						{{buildingStructureName}}
					</div>
				</div>

				<div class="line_list  clearfix">
					<span class="line_listtit fl">建筑层高：</span>
					<div class="line_listinput">
						{{build}}米
					</div>
				</div>

				<div class="line_list  clearfix">
					<span class="line_listtit fl">外墙厚度：</span>
					<div class="line_listinput">
						{{wallThickness}}厘米
					</div>
				</div>

				<div class="line_list  clearfix">
					<span class="line_listtit fl">外墙保温：</span>
					<div class="line_listinput">
						{{wallKeepWarmName}}
					</div>
				</div>

				<div class="line_list  clearfix">
					<span class="line_listtit fl">采暖末端：</span>
					<div class="line_listinput">
						{{heatingTerminalName}}
					</div>
				</div>

				<div class="line_list  clearfix">
					<span class="line_listtit fl">供暖方式：</span>
					<div class="line_listinput">
						{{heatingModeName}}
					</div>
				</div>

			</div>
			<!-- gm房屋信息详情-accordion添加实现手风琴效果gm -->
			<div class="tabs_box">
				<el-collapse v-model="tabsNames">
					<el-collapse-item name="设备信息">
					    <template slot="title">
					      <div class="tabs_headtit">设备信息</div>
					    </template>
					    <div class="">
					    	<el-table
						        :data="equiTable"
						        stripe
						        border
						        style="width: 100%"
										v-loading="loading">
						        <el-table-column
						          type='index'
						          label="序号"
						          align='center'
						          width="50">
						        </el-table-column>
						        <el-table-column
						          prop="classes"
						          label="设备类别"
						          width="120">
						        </el-table-column>
						        <el-table-column
						          prop="model"
						          label="设备型号"
						          width="120">
						        </el-table-column>
						        <el-table-column
						          prop="equipmentCompanyName"
						          label="设备品牌">
						        </el-table-column>
						        <el-table-column
						          prop="equipmentNumber"
						          label="设备序列号"
						          width="120">
						        </el-table-column>
						         <el-table-column
						          prop="transmitNumber"
						          label="设备传输号"
						          width="120">
						        </el-table-column>
						      </el-table>

						      
						      <div class="block">
						        <el-pagination
						          @size-change="handleSizeChangeDeviceList"
							        @current-change="handleCurrentChangeDeviceList"
							        :current-page.sync="currentPageDeviceList"
							        :page-sizes="[5, 10, 20, 30]"
							        :page-size="pageSizeDeviceList"
							        layout="sizes, prev, pager, next"
							        :total="totalDeviceList">
						        </el-pagination>
						      </div>
					    </div>

					</el-collapse-item>
					<el-collapse-item v-model="tabsNamesCust">
						<template slot="title">
					      <div class="tabs_headtit">客户信息</div>
					    </template>
					    <div class="">
					    	<el-table
						        :data="customerTable"
						        stripe
						        border
						        style="width: 100%"
										v-loading="loadingCust">
						        <el-table-column
						          type='index'
						          label="序号"
						          align='center'
						          width="50">
						        </el-table-column>
						        <el-table-column
						          prop="clientName"
						          label="姓名"
						          width="120">
						        </el-table-column>
						        <el-table-column
						          prop="sexName"
						          label="性别"
						          width="60">
						        </el-table-column>
						        <el-table-column
						          prop="phone"
						          label="电话号码" 
						          width="120">
						        </el-table-column>
						        <el-table-column
						          prop="idcardReal"
						          label="身份证号"
						          width="180">
						        </el-table-column>
						         <el-table-column
						          prop="communicationRecordCount"
						          label="沟通记录">
						        </el-table-column>
						      </el-table>

						      
						      <div class="block">
						        <el-pagination
						          @size-change="handleSizeChangeCustomer"
							        @current-change="handleCurrentChangeCustomer"
							        :current-page.sync="currentPageCustomer"
							        :page-sizes="[5, 10, 20, 30]"
							        :page-size="pageSizeCustomer"
							        layout="sizes, prev, pager, next"
							        :total="totalCustomer">
						        </el-pagination>
						      </div>
					    </div>
					</el-collapse-item>
				</el-collapse>
			</div>
		</div>
		
	</div>

</template>

<script>
import { 
	getHouse, 
	getDeviceList, 
	getCustomerList } from '@/api'
	export default{
		data(){
			return{
				tabsNames:"设备信息",//底部折叠打开的
				tabsNamesCust: '客户信息',
				address:"",
				structureArea:"",
				heatingArea:"",
				buildingStructureName:"",
				build:"",
				wallThickness:"",
				wallKeepWarmName:"",
				heatingTerminalName:"",
				heatingModeName:"",
				houseTable:[], // 房屋信息
				equiTable:[], // 设备信息
				customerTable:[], // 客户信息
				loading: true,
				loadingCust: true,
				totalDeviceList: null,// 分页总条数--设备
				pageSizeDeviceList:10, //当前分页一页多少条数--设备
				currentPageDeviceList:1,//当前页数--设备
				totalCustomer: null,// 分页总条数--客户
				pageSizeCustomer:10, //当前分页一页多少条数--客户
				currentPageCustomer:1//当前页数--客户
			}
		},
		created () {
			let houseId = this.$route.query.houseId
			//alert(this.$route.query.houseId)
			let params = {
				houseId: houseId
			}
			let paramsDeviceList = {
				houseId: houseId,
				page: this.currentPageDeviceList,
				size: this.pageSizeDeviceList
			}
			let paramsClienteleList = {
				houseId: houseId,
				page: this.currentPageCustomer,
				size: this.pageSizeCustomer
			}
			this.House(params)
			this.DeviceList(paramsDeviceList)
			this.ClienteleList(paramsClienteleList)
		},
		methods:{
			//房屋信息
			House (params) {
				getHouse(params).then(res => {
					//console.log(res.data.data)
					let code = res.data.code
					if(code == 0) {
						let data = res.data.data
						this.address = data.address
						this.structureArea = data.structureArea
						this.heatingArea = data.heatingArea
						this.buildingStructureName = data.buildingStructureName
						this.build = data.build
						this.wallThickness = data.wallThickness
						this.wallKeepWarmName = data.wallKeepWarmName
						this.heatingTerminalName = data.heatingTerminalName
						this.heatingModeName = data.heatingModeName
					} else if (code == 1) {
						this.$message({
							message: res.data.msg
						})
					}
				})
			},
			//设备信息
			DeviceList (params) {
				getDeviceList(params).then(res => {
					let code = res.data.code
					if(code == 0) {
						let data = res.data.data
						this.equiTable = data.list
						this.totalDeviceList = data.pageInfo.total
						this.loading= false
					} else if (code == 1) {
						this.$message({
							message: res.data.msg
						})
					}
				})
			},
			//客户信息
			ClienteleList (params) {
				getCustomerList(params).then(res => {
					let code = res.data.code
					if(code == 0) {
						let data = res.data.data
						this.customerTable = data.list
						this.totalCustomer = data.pageInfo.total
						this.loadingCust= false
					} else if (code == 1) {
						this.$message({
							message: res.data.msg
						})
					}
				})
			},
			handleSizeChangeDeviceList (val) { //改变每页的条数--设备
				this.pageSizeDeviceList = val;
				this.currentPageDeviceList = 1
				let params = {
					houseId: houseId,
					page: this.currentPageDeviceList,
					size: this.pageSizeDeviceList
		    }
		    this.DeviceList(params);//调用查询接口
		  },
			handleCurrentChangeDeviceList (val) { //改变当前页--设备
				this.currentPageDeviceList = val
				let params = {
					houseId: houseId,
					page: this.currentPageDeviceList,
					size: this.pageSizeDeviceList
				}
				this.DeviceList(params);//调用查询接口
			},
			handleSizeChangeCustomer (val) { //改变每页的条数--客户
				this.pageSizeCustomer = val;
				this.currentPageCustomer = 1
				let params = {
					houseId: houseId,
					page: this.currentPageCustomer,
					size: this.pageSizeCustomer
				}
				this.ClienteleList(params);//调用查询接口
			},
			handleCurrentChangeCustomer (val) { //改变当前页--客户
			  this.currentPageCustomer = val
				let params = {
					houseId: houseId,
					page: this.currentPageCustomer,
					size: this.pageSizeCustomer
				}
				this.ClienteleList(params);//调用查询接口
			}
		}
	};
</script>

<style scoped>
	.line100{width:100% !important;}
	.line_list{float:left;width:50%;margin-bottom:5px;line-height:30px;}
	.line_listtit{width:120px;text-align:right;margin-right:5px;}
	.line_listinput{display:flex;overflow:hidden;}
	.tabs_box .tabs_headtit{padding-left:15px;}
	.tabs_box .el-collapse-item{margin-bottom:20px;border:0 !important;}
	.tabs_box .el-collapse{border:0 !important;}
	.el-collapse-item__wrap{border-color:#fff !important;}
</style>